<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>活动记录</span>
                <div class="mt-4">
                    <el-input v-model="name" placeholder="请输入关键字" class="input-with-select">
                        <template #append>
                            <el-button @click="btn_loadbyno" :icon="Search" />
                        </template>
                    </el-input>
                </div>
            </div>
        </template>
        <el-config-provider :locale="locale">
            <el-table :data="tableData" :row-class-name="tableRowClassName" height="440"
                :default-sort="{ prop: 'fDate', order: 'ascending' }" row-key="id" style="width: 100%">

                <!-- 展开行内容 -->
                <el-table-column type="expand" width="60px">
                    <template #default="props">
                        <el-descriptions class="descriptions" title="活动详情" :column="2" style="width: 75%" border>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        <el-icon :style="iconStyle">
                                            <user />
                                        </el-icon>
                                        活动名称
                                    </div>
                                </template>
                                <el-tag style="margin-right: 2px">{{ props.row.supervisor.name }}</el-tag>
                                <el-tag style="margin-right: 2px" v-if="props.row.supervisor.sex == '0'">男</el-tag>
                                <el-tag style="margin-right: 2px" v-if="props.row.supervisor.sex == '1'">女</el-tag>
                                <el-tag style="margin-right: 2px" v-if="props.row.supervisor.birthday">{{
                                    props.row.supervisor.birthday }}</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        <el-icon :style="iconStyle">
                                            <iphone />
                                        </el-icon>
                                        反馈者联系电话
                                    </div>
                                </template>
                                <el-tag>{{ props.row.supervisor.telephone }}</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        <el-icon :style="iconStyle">
                                            <location />
                                        </el-icon>
                                        反馈信息所在地
                                    </div>
                                </template>
                                <el-tag style="margin-right: 5px">{{ props.row.province.name }}</el-tag>
                                <el-tag style="margin-right: 5px">{{ props.row.city.name }}</el-tag>
                                <el-tag style="margin-right: 5px">{{ props.row.town.name }}</el-tag>
                                <el-tag style="margin-right: 5px">{{ props.row.address }}</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        <el-icon :style="iconStyle">
                                            <Odometer />
                                        </el-icon>
                                        预估污染等级
                                    </div>
                                </template>

                                <el-tag effect="dark" color="#67C23A"
                                    style="margin-right: 5px; color: black;border: none;"
                                    v-if="props.row.aqi.id == '1'">一级</el-tag>
                                <el-tag effect="dark" color="#FFFF00"
                                    style="margin-right: 5px; color: black;border: none;"
                                    v-if="props.row.aqi.id == '2'">二级</el-tag>
                                <el-tag effect="dark" color="#FFA500"
                                    style="margin-right: 5px; color: black;border: none;"
                                    v-if="props.row.aqi.id == '3'">三级</el-tag>
                                <el-tag effect="dark" color="#FF0000"
                                    style="margin-right: 5px; color: black;border: none;"
                                    v-if="props.row.aqi.id == '4'">四级</el-tag>
                                <el-tag effect="dark" color="#800080"
                                    style="margin-right: 5px; color: black;border: none;"
                                    v-if="props.row.aqi.id == '5'">五级</el-tag>
                                <el-tag effect="dark" color="#800000"
                                    style="margin-right: 5px; color: black;border: none;"
                                    v-if="props.row.aqi.id == '6'">六级</el-tag>

                                <el-tag effect="dark" color="#67C23A"
                                    style="margin-right: 5px; color: black;border: none;"
                                    v-if="props.row.aqi.id == '1'">优</el-tag>
                                <el-tag effect="dark" color="#FFFF00"
                                    style="margin-right: 5px; color: black;border: none;"
                                    v-if="props.row.aqi.id == '2'">良好</el-tag>
                                <el-tag effect="dark" color="#FFA500"
                                    style="margin-right: 5px; color: black;border: none;"
                                    v-if="props.row.aqi.id == '3'">轻度污染</el-tag>
                                <el-tag effect="dark" color="#FF0000"
                                    style="margin-right: 5px; color: black;border: none;"
                                    v-if="props.row.aqi.id == '4'">中度污染</el-tag>
                                <el-tag effect="dark" color="#800080"
                                    style="margin-right: 5px; color: black;border: none;"
                                    v-if="props.row.aqi.id == '5'">重度污染</el-tag>
                                <el-tag effect="dark" color="#800000"
                                    style="margin-right: 5px; color: black;border: none;"
                                    v-if="props.row.aqi.id == '6'">严重污染</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        <el-icon :style="iconStyle">
                                            <ChatLineSquare />
                                        </el-icon>
                                        反馈信息描述
                                    </div>
                                </template>
                                <el-tag>{{ props.row.info }}</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        <el-icon :style="iconStyle">
                                            <DocumentChecked />
                                        </el-icon>
                                        反馈时间
                                    </div>
                                </template>
                                <el-tag style="margin-right: 5px">{{ props.row.fDate }}</el-tag>
                                <el-tag style="margin-right: 5px">{{ props.row.fTime }}</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        <el-icon :style="iconStyle">
                                            <Star />
                                        </el-icon>
                                        反馈信息状态
                                    </div>
                                </template>
                                <el-tag style="margin-right: 5px" v-if="props.row.state == '0'">未指派</el-tag>
                                <el-tag style="margin-right: 5px" v-if="props.row.state == '1'">已指派</el-tag>
                                <el-tag style="margin-right: 5px" v-if="props.row.state == '2'">已确认</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        <el-icon :style="iconStyle">
                                            <Checked />
                                        </el-icon>
                                        指派时间
                                    </div>
                                </template>
                                <el-tag style="margin-right: 5px">{{ props.row.assignDate ? props.row.assignDate :
                                    "尚未指派"
                                    }}</el-tag>
                                <el-tag v-if="props.row.assignTime" style="margin-right: 5px">{{ props.row.assignTime
                                    }}</el-tag>
                            </el-descriptions-item>


                            <el-descriptions-item v-if="props.row.grid">
                                <template #label>
                                    <div class="cell-item">
                                        <el-icon :style="iconStyle">
                                            <user />
                                        </el-icon>
                                        网格员信息
                                    </div>
                                </template>
                                <el-tag style="margin-right: 2px">{{ props.row.grid.name }}</el-tag>
                                <el-tag style="margin-right: 2px" v-if="props.row.grid.sex == '0'">男</el-tag>
                                <el-tag style="margin-right: 2px" v-if="props.row.grid.sex == '1'">女</el-tag>
                                <el-tag style="margin-right: 2px" v-if="props.row.grid.birthday">{{
                                    props.row.grid.birthday
                                    }}</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item v-if="props.row.grid">
                                <template #label>
                                    <div class="cell-item">
                                        <el-icon :style="iconStyle">
                                            <iphone />
                                        </el-icon>
                                        网格员联系电话
                                    </div>
                                </template>
                                <el-tag>{{ props.row.grid.telephone }}</el-tag>
                            </el-descriptions-item>
                        </el-descriptions>
                    </template>
                </el-table-column>

                <!-- table部分 -->
                <el-table-column prop="id" label="#" width="120px" />
                <el-table-column prop="sId" label="活动名称" width="120px">
                    <template #default="scope">
                        {{ scope.row.supervisor ? scope.row.supervisor.name : "" }}
                    </template>
                </el-table-column>
                <el-table-column prop="fDate" label="报名日期" sortable />
                <el-table-column prop="state" label="审核状态" :filters="[
                    { text: '待审核', value: 0 },
                    { text: '已通过', value: 1 },
                    { text: '未通过', value: 2 },
                ]" :filter-method="filterState" filter-placement="bottom-end">
                    <template #default="scope">
                        <p v-if="scope.row.state == '0'" style="color: #ff0000"><el-icon :style="iconStyle">
                                <CircleCloseFilled />
                            </el-icon>待审核</p>
                        <p v-if="scope.row.state == '1'" style="color: #ffa500"><el-icon :style="iconStyle">
                                <WarningFilled />
                            </el-icon>已通过</p>
                        <p v-if="scope.row.state == '2'" style="color: #67c23a"><el-icon :style="iconStyle">
                                <SuccessFilled />
                            </el-icon>未通过</p>
                    </template>
                </el-table-column>

            </el-table>

            <!-- 分页 -->
            <div style="text-align: -webkit-center">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :small="small"
                    :page-sizes="[6, 7, 8, 9, 10]" :background="background"
                    layout="prev, pager, next, jumper,sizes,total" v-model:total="total"
                    @current-change="handleCurrentChange" @size-change="handleCurrentChange"
                    style="width: max-content;margin-top: 50px" />
            </div>
        </el-config-provider>
    </el-card>

</template>

<script setup>
import { ref } from 'vue'
import { ElNotification } from 'element-plus'
import { InfoFilled, Search } from '@element-plus/icons-vue'
import $axios from '../../../utils/axios'
//斑马条
const tableRowClassName = ({ rowIndex }) => {
    return rowIndex % 2 === 1 ? 'success-row' : ''
}

const cancelTrans = (formEl) => {
    transDialogVisible.value = false
    formEl.resetFields()
    if (!formEl) return
    // formEl.resetFields()
}
</script>

<style scoped>
.box-card {
    width: 99%;
    height: 95%;
    margin-top: 12px;
    border-radius: 12px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>

<style>
.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>